"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _DownOutlined = _interopRequireDefault(require("@ant-design/icons/DownOutlined"));
var _classnames = _interopRequireDefault(require("classnames"));
var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
var React = _interopRequireWildcard(require("react"));
var _checkbox = _interopRequireDefault(require("../checkbox"));
var _dropdown = _interopRequireDefault(require("../dropdown"));
var _reactNode = require("../_util/reactNode");
var _transKeys = require("../_util/transKeys");
var _ListBody = _interopRequireWildcard(require("./ListBody"));
var _search = _interopRequireDefault(require("./search"));
const defaultRender = () => null;
function isRenderResultPlainObject(result) {
  return !!(result && !(0, _reactNode.isValidElement)(result) && Object.prototype.toString.call(result) === '[object Object]');
}
function getEnabledItemKeys(items) {
  return items.filter(data => !data.disabled).map(data => data.key);
}
let TransferList = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inherits2.default)(TransferList, _React$PureComponent);
  var _super = (0, _createSuper2.default)(TransferList);
  function TransferList(props) {
    var _this;
    (0, _classCallCheck2.default)(this, TransferList);
    _this = _super.call(this, props);
    _this.defaultListBodyRef = /*#__PURE__*/React.createRef();
    // =============================== Filter ===============================
    _this.handleFilter = e => {
      const {
        handleFilter
      } = _this.props;
      const {
        target: {
          value: filterValue
        }
      } = e;
      _this.setState({
        filterValue
      });
      handleFilter(e);
    };
    _this.handleClear = () => {
      const {
        handleClear
      } = _this.props;
      _this.setState({
        filterValue: ''
      });
      handleClear();
    };
    _this.matchFilter = (text, item) => {
      const {
        filterValue
      } = _this.state;
      const {
        filterOption
      } = _this.props;
      if (filterOption) {
        return filterOption(filterValue, item);
      }
      return text.includes(filterValue);
    };
    // =============================== Render ===============================
    _this.renderListBody = (renderList, props) => {
      let bodyContent = renderList ? renderList(props) : null;
      const customize = !!bodyContent;
      if (!customize) {
        bodyContent = /*#__PURE__*/React.createElement(_ListBody.default, Object.assign({
          ref: _this.defaultListBodyRef
        }, props));
      }
      return {
        customize,
        bodyContent
      };
    };
    _this.renderItem = item => {
      const {
        render = defaultRender
      } = _this.props;
      const renderResult = render(item);
      const isRenderResultPlain = isRenderResultPlainObject(renderResult);
      return {
        renderedText: isRenderResultPlain ? renderResult.value : renderResult,
        renderedEl: isRenderResultPlain ? renderResult.label : renderResult,
        item
      };
    };
    _this.getSelectAllLabel = (selectedCount, totalCount) => {
      const {
        itemsUnit,
        itemUnit,
        selectAllLabel
      } = _this.props;
      if (selectAllLabel) {
        return typeof selectAllLabel === 'function' ? selectAllLabel({
          selectedCount,
          totalCount
        }) : selectAllLabel;
      }
      const unit = totalCount > 1 ? itemsUnit : itemUnit;
      return /*#__PURE__*/React.createElement(React.Fragment, null, (selectedCount > 0 ? `${selectedCount}/` : '') + totalCount, " ", unit);
    };
    _this.state = {
      filterValue: ''
    };
    return _this;
  }
  (0, _createClass2.default)(TransferList, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      clearTimeout(this.triggerScrollTimer);
    }
  }, {
    key: "getCheckStatus",
    value: function getCheckStatus(filteredItems) {
      const {
        checkedKeys
      } = this.props;
      if (checkedKeys.length === 0) {
        return 'none';
      }
      const checkedKeysMap = (0, _transKeys.groupKeysMap)(checkedKeys);
      if (filteredItems.every(item => checkedKeysMap.has(item.key) || !!item.disabled)) {
        return 'all';
      }
      return 'part';
    }
    // ================================ Item ================================
  }, {
    key: "getFilteredItems",
    value: function getFilteredItems(dataSource, filterValue) {
      const filteredItems = [];
      const filteredRenderItems = [];
      dataSource.forEach(item => {
        const renderedItem = this.renderItem(item);
        const {
          renderedText
        } = renderedItem;
        // Filter skip
        if (filterValue && !this.matchFilter(renderedText, item)) {
          return null;
        }
        filteredItems.push(item);
        filteredRenderItems.push(renderedItem);
      });
      return {
        filteredItems,
        filteredRenderItems
      };
    }
  }, {
    key: "getListBody",
    value: function getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, notFoundContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled) {
      const search = showSearch ? /*#__PURE__*/React.createElement("div", {
        className: `${prefixCls}-body-search-wrapper`
      }, /*#__PURE__*/React.createElement(_search.default, {
        prefixCls: `${prefixCls}-search`,
        onChange: this.handleFilter,
        handleClear: this.handleClear,
        placeholder: searchPlaceholder,
        value: filterValue,
        disabled: disabled
      })) : null;
      const {
        bodyContent,
        customize
      } = this.renderListBody(renderList, Object.assign(Object.assign({}, (0, _omit.default)(this.props, _ListBody.OmitProps)), {
        filteredItems,
        filteredRenderItems,
        selectedKeys: checkedKeys
      }));
      const getNotFoundContent = () => {
        const contentIndex = this.props.direction === 'left' ? 0 : 1;
        return Array.isArray(notFoundContent) ? notFoundContent[contentIndex] : notFoundContent;
      };
      let bodyNode;
      // We should wrap customize list body in a classNamed div to use flex layout.
      if (customize) {
        bodyNode = /*#__PURE__*/React.createElement("div", {
          className: `${prefixCls}-body-customize-wrapper`
        }, bodyContent);
      } else {
        bodyNode = filteredItems.length ? bodyContent : /*#__PURE__*/React.createElement("div", {
          className: `${prefixCls}-body-not-found`
        }, getNotFoundContent());
      }
      return /*#__PURE__*/React.createElement("div", {
        className: (0, _classnames.default)(showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`)
      }, search, bodyNode);
    }
  }, {
    key: "getCheckBox",
    value: function getCheckBox(_ref) {
      let {
        filteredItems,
        onItemSelectAll,
        disabled,
        prefixCls
      } = _ref;
      const checkStatus = this.getCheckStatus(filteredItems);
      const checkedAll = checkStatus === 'all';
      const checkAllCheckbox = /*#__PURE__*/React.createElement(_checkbox.default, {
        disabled: disabled,
        checked: checkedAll,
        indeterminate: checkStatus === 'part',
        className: `${prefixCls}-checkbox`,
        onChange: () => {
          // Only select enabled items
          onItemSelectAll(filteredItems.filter(item => !item.disabled).map(_ref2 => {
            let {
              key
            } = _ref2;
            return key;
          }), !checkedAll);
        }
      });
      return checkAllCheckbox;
    }
  }, {
    key: "render",
    value: function render() {
      const {
        filterValue
      } = this.state;
      const {
        prefixCls,
        dataSource = [],
        titleText = '',
        checkedKeys,
        disabled,
        footer,
        showSearch = false,
        style,
        searchPlaceholder,
        notFoundContent,
        selectAll,
        selectCurrent,
        selectInvert,
        removeAll,
        removeCurrent,
        renderList,
        onItemSelectAll,
        onItemRemove,
        showSelectAll = true,
        showRemove,
        pagination,
        direction
      } = this.props;
      // Custom Layout
      const footerDom = footer && (footer.length < 2 ? footer(this.props) : footer(this.props, {
        direction
      }));
      const listCls = (0, _classnames.default)(prefixCls, {
        [`${prefixCls}-with-pagination`]: !!pagination,
        [`${prefixCls}-with-footer`]: !!footerDom
      });
      // ====================== Get filtered, checked item list ======================
      const {
        filteredItems,
        filteredRenderItems
      } = this.getFilteredItems(dataSource, filterValue);
      // ================================= List Body =================================
      const listBody = this.getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, notFoundContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled);
      // ================================ List Footer ================================
      const listFooter = footerDom ? /*#__PURE__*/React.createElement("div", {
        className: `${prefixCls}-footer`
      }, footerDom) : null;
      const checkAllCheckbox = !showRemove && !pagination && this.getCheckBox({
        filteredItems,
        onItemSelectAll,
        disabled,
        prefixCls
      });
      let items;
      if (showRemove) {
        items = [/* Remove Current Page */
        pagination ? {
          key: 'removeCurrent',
          onClick: () => {
            var _a;
            const pageKeys = getEnabledItemKeys((((_a = this.defaultListBodyRef.current) === null || _a === void 0 ? void 0 : _a.getItems()) || []).map(entity => entity.item));
            onItemRemove === null || onItemRemove === void 0 ? void 0 : onItemRemove(pageKeys);
          },
          label: removeCurrent
        } : null, /* Remove All */
        {
          key: 'removeAll',
          onClick: () => {
            onItemRemove === null || onItemRemove === void 0 ? void 0 : onItemRemove(getEnabledItemKeys(filteredItems));
          },
          label: removeAll
        }].filter(item => item);
      } else {
        items = [{
          key: 'selectAll',
          onClick: () => {
            const keys = getEnabledItemKeys(filteredItems);
            onItemSelectAll(keys, keys.length !== checkedKeys.length);
          },
          label: selectAll
        }, pagination ? {
          key: 'selectCurrent',
          onClick: () => {
            var _a;
            const pageItems = ((_a = this.defaultListBodyRef.current) === null || _a === void 0 ? void 0 : _a.getItems()) || [];
            onItemSelectAll(getEnabledItemKeys(pageItems.map(entity => entity.item)), true);
          },
          label: selectCurrent
        } : null, {
          key: 'selectInvert',
          onClick: () => {
            var _a;
            let availableKeys;
            if (pagination) {
              availableKeys = getEnabledItemKeys((((_a = this.defaultListBodyRef.current) === null || _a === void 0 ? void 0 : _a.getItems()) || []).map(entity => entity.item));
            } else {
              availableKeys = getEnabledItemKeys(filteredItems);
            }
            const checkedKeySet = new Set(checkedKeys);
            const newCheckedKeys = [];
            const newUnCheckedKeys = [];
            availableKeys.forEach(key => {
              if (checkedKeySet.has(key)) {
                newUnCheckedKeys.push(key);
              } else {
                newCheckedKeys.push(key);
              }
            });
            onItemSelectAll(newCheckedKeys, true);
            onItemSelectAll(newUnCheckedKeys, false);
          },
          label: selectInvert
        }];
      }
      const dropdown = /*#__PURE__*/React.createElement(_dropdown.default, {
        className: `${prefixCls}-header-dropdown`,
        menu: {
          items
        },
        disabled: disabled
      }, /*#__PURE__*/React.createElement(_DownOutlined.default, null));
      // ================================== Render ===================================
      return /*#__PURE__*/React.createElement("div", {
        className: listCls,
        style: style
      }, /*#__PURE__*/React.createElement("div", {
        className: `${prefixCls}-header`
      }, showSelectAll ? /*#__PURE__*/React.createElement(React.Fragment, null, checkAllCheckbox, dropdown) : null, /*#__PURE__*/React.createElement("span", {
        className: `${prefixCls}-header-selected`
      }, this.getSelectAllLabel(checkedKeys.length, filteredItems.length)), /*#__PURE__*/React.createElement("span", {
        className: `${prefixCls}-header-title`
      }, titleText)), listBody, listFooter);
    }
  }]);
  return TransferList;
}(React.PureComponent);
exports.default = TransferList;